<template>
    <div class="zs-table-page-container">
        <div class="zs-card-sm zs-space-bottom zs-layout-flex-row zs-layout-justify-between">
            <span>
                <el-select v-model="projectZylyCode" filterable class="zs-select-md zs-space-right-sm" placeholder="项目名称">
                    <el-option v-for="item in projectList" :key="item.projectZylyCode" :label="item.projectName"
                        :value="item.projectZylyCode" />
                </el-select>
                <el-date-picker class="zs-space-right-sm" v-model="startDate" :type="pickerDate" placeholder="日期"
                    :clearable="false" :value-format="valueFormat" :disabled-date="disabledDateStart" />
                <el-select v-model="brandname" filterable class="zs-select-md zs-space-right-sm" placeholder="品牌">
                    <el-option v-for="(item, index) in brandList" :key="index" :label="item" :value="item" />
                </el-select>
                <el-popover popper-class="zs-popper" placement="bottom-end" trigger="click">
                    <template #reference>
                        <el-button class="zs-btn-square-solid" :class="{ 'zs-btn-square-solid-active': goodsName.length > 0 || goodsTypeName.length > 0 || wmname.length > 0 }">
                            <el-icon>
                                <MoreFilled />
                            </el-icon>
                        </el-button>
                    </template>
                    <template #default>
                        <div>
                            <el-select v-model="goodsName" class="zs-select-md zs-space-right-sm" placeholder="商品名称"
                                filterable multiple collapse-tags collapse-tags-tooltip clearable :teleported="false">
                                <el-option v-for="(item, index) in goodsList" :key="index" :label="item" :value="item" />
                            </el-select>
                            <el-select v-model="goodsTypeName" class="zs-select-md zs-space-right-sm" placeholder="商品类别"
                                filterable multiple collapse-tags collapse-tags-tooltip clearable :teleported="false">
                                <el-option v-for="(item, index) in goodsTypeList" :key="index" :label="item"
                                    :value="item" />
                            </el-select>
                            <el-select v-model="wmname" class="zs-select-md zs-space-right-sm" placeholder="经营方式" filterable
                                multiple collapse-tags collapse-tags-tooltip clearable :teleported="false">
                                <el-option v-for="(item, index) in wmnameList" :key="index" :label="item" :value="item" />
                            </el-select>
                        </div>
                    </template>
                </el-popover>
                <el-button class="zs-btn-plain" @click="getData()">
                    查询
                </el-button>
            </span>
            <span class="zs-layout-flex-row">
                <div class="db-btn zs-space-right-sm" :class="{ 'db-btn-primary': curTab == '日' }" @click="changeTab('日')">
                    按日
                </div>
                <div class="db-btn zs-space-right-sm" :class="{ 'db-btn-primary': curTab == '月' }" @click="changeTab('月')">
                    按月
                </div>
                <div class="db-btn zs-space-right" :class="{ 'db-btn-primary': curTab == '年' }" @click="changeTab('年')">按年
                </div>
                <el-button class="zs-btn-plain" @click="handleDownload"><el-icon class="el-icon--left">
                        <Upload />
                    </el-icon>导出</el-button>
            </span>
        </div>
        <div class="zs-card zs-table-page-content">
            <el-table :data="tableData" class="zs-table-page-main" :stripe="stripe">
                <el-table-column label="序号" width="60" :align="'center'">
                    <template #default="scope">
                        {{ scope.$index + 1 + curPageSize * (currentPage - 1) }}
                    </template>
                </el-table-column>
                <el-table-column prop="ppcname" label="品牌" :align="'left'" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="gbcname" label="商品名称" :align="'left'" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="catcname" label="商品类别" :align="'center'" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="wmname" label="经营方式" :align="'center'" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column label="销售收入" :align="'right'">
                    <template #default="scope">
                        {{ toThousands(scope.row.sale) }}
                    </template>
                </el-table-column>
                <el-table-column label="销售毛利" :align="'right'">
                    <template #default="scope">
                        {{ toThousands(scope.row.jml) }}
                    </template>
                </el-table-column>
                <el-table-column label="毛利率" :align="'right'">
                    <template #default="scope">
                        {{ scope.row.jmllShow == '-' ? '-' : `${scope.row.jmllShow}%` }}
                    </template>
                </el-table-column>
                <el-table-column label="销售数量" :align="'right'">
                    <template #default="scope">
                        {{ toThousands(scope.row.sl) }}
                    </template>
                </el-table-column>
            </el-table>
            <div class="zs-text-gray-dark zs-text-sm zs-space-top">*销售收入,销售毛利：元</div>
            <div class="zs-space-top-sm zs-table-page-pagination">
                <el-pagination v-model:currentPage="currentPage" v-model:page-size="curPageSize" :page-sizes="curPageSizes"
                    :small="true" :background="true" layout="total, sizes, prev, pager, next, jumper" :total="total"
                    @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </div>
        </div>
    </div>
</template>
<script setup>
import dbPublicApi from '@/api/dbPublic'
import detailApi from '@/api/SelfSupport/detailPages'
import { dateFormat, toThousands } from '@/utils/number-util'
import { downloadNewFile } from "@/utils/publicUtils"
import { ref } from 'vue'
import { useStore } from 'vuex'
import { useRoute } from 'vue-router'
let store = useStore()
const stripe = ref(true)
const route = useRoute().query

let projectZylyCode = ref(route.projectZylyCode)
const dataTime = route.dataTime
const updateDate = route.updateDate
const tabPermi = route.tabPermi
let curTab = ref(route.curTab)

let startDate = ref('')
let valueFormat = ref('YYYY-MM-DD')
let pickerDate = ref('date')

let brandname = ref(route.brandname)
let brandList = ref([])

let goodsName = ref([route.goodsName])
let goodsList = ref([])

let goodsTypeName = ref([route.goodsTypeName])
let goodsTypeList = ref([])

let wmname = ref([route.wmname])
let wmnameList = ref(['经销', '成本代销', '扣率代销', '联营'])


let projectList = ref([])
const getPorjectList = async () => {
    await dbPublicApi.queryProjectPcApi({ dataTime: updateDate, resourceKey: tabPermi }).then((res) => {
        if (res.data.code == 200) {
            projectList.value = res.data.data
        }
    })
}

// 获取品牌列表
const getBrandList = async () => {
    await detailApi.saleBrandDownApi({ projectZylyCode: projectZylyCode.value }).then((res) => {
        if (res.data.code == 200) {
            brandList.value = res.data.data
        }
    })
}

// 获取商品名称列表
const getGoodsNameList = async () => {
    await detailApi.commodityNameDownApi({ projectZylyCode: projectZylyCode.value }).then((res) => {
        if (res.data.code == 200) {
            goodsList.value = res.data.data
        }
    })
}

// 获取商品类别列表
const getGoodsTypeList = async () => {
    await detailApi.commodityTypeDownApi({ projectZylyCode: projectZylyCode.value }).then((res) => {
        if (res.data.code == 200) {
            goodsTypeList.value = res.data.data
        }
    })
}

const changeTab = (value) => {
    curTab.value = value
    if (curTab.value == '日') {
        pickerDate.value = 'date'
        valueFormat.value = 'YYYY-MM-DD'
        startDate.value = updateDate
    }
    if (curTab.value == '月') {
        pickerDate.value = 'month'
        valueFormat.value = 'YYYY-MM'
        startDate.value = dateFormat(new Date(updateDate), 'YYYY-MM')
    }
    if (curTab.value == '年') {
        pickerDate.value = 'year'
        valueFormat.value = 'YYYY'
        startDate.value = new Date(updateDate).getFullYear().toString()
    }
    getPorjectList()
    getBrandList()
    getGoodsNameList()
    getGoodsTypeList()
    getData()
}

const curPageSizes = ref(store.state.uiPageSizes)
let curPageSize = ref(store.state.uiPageSizeDefault)
// 分页
let currentPage = ref(1)
const total = ref(0)
const handleSizeChange = (val) => {
    curPageSize.value = val
    getList()
}
const handleCurrentChange = (val) => {
    currentPage.value = val
    getList()
}

const tableData = ref([])
const getList = () => {
    detailApi.commodityDetailApi({ projectZylyCode: projectZylyCode.value, dataTime: startDate.value, timeType: curTab.value, ppcname: brandname.value, gbcname: goodsName.value, catcname: goodsTypeName.value, wmname: wmname.value, pageNo: currentPage.value, pageSize: curPageSize.value }).then((res) => {
        if (res.data.code == 200) {
            tableData.value = res.data.data.childList
            total.value = res.data.data.totalCount
        }
    })
}
const getData = () => {
    currentPage.value = 1
    getList()
}

const handleDownload = async () => {
    const fileName = `商品明细${curTab.value}列表.xls`
    let fileData
    await detailApi.commodityDetailExportApi({ projectZylyCode: projectZylyCode.value, dataTime: startDate.value, timeType: curTab.value, ppcname: brandname.value, gbcname: goodsName.value, catcname: goodsTypeName.value, wmname: wmname.value }).then(res => {
        fileData = res.data
    })
    downloadNewFile(fileData, fileName)
}


const disabledDateStart = (date) => {
    return date.getTime() > new Date(updateDate).getTime()
}

const init = () => {
    if (curTab.value == '日') {
        pickerDate.value = 'date'
        valueFormat.value = 'YYYY-MM-DD'
        startDate.value = dataTime
    }
    if (curTab.value == '月') {
        pickerDate.value = 'month'
        valueFormat.value = 'YYYY-MM'
        startDate.value = dataTime
    }
    if (curTab.value == '年') {
        pickerDate.value = 'year'
        valueFormat.value = 'YYYY'
        startDate.value = dataTime
    }
    getPorjectList()
    getBrandList()
    getGoodsNameList()
    getGoodsTypeList()
    getData()
}
init()
</script>


<style scoped lang="scss"></style>
